<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <ul>
      <li>第1个孩子</li>
      <li>第2个孩子</li>
      <li>第3个孩子</li>
      <li>第4个孩子</li>
      <li>第5个孩子</li>
    </ul>
  </body>
</html>
<script !src="">
  // 需求： 点击每个小li都会有弹窗效果
  // 以前的写法
  // const lis = document.querySelectorAll('li')
  //  for (let i = 0; i < lis.length; i++) {
  //    lis[i].addEventListener('click', function() {
  //      console.log('li点击了')
  //      this.style.color = 'red'
  //    })
  //  }

  // 事件委托---委托给ul
  const ul = document.querySelector("ul");
  ul.addEventListener("click", function (e) {
    console.log("li点击-委托");
    // this.style.color='blue'  //所有的li会变
    // 先个判断  被点击的是不是当前的li
    // console.log(e.target)
    // if (e.target.tagName ==='LI'){
    //   e.target.style.color='green'
    // }
    // this.style.color=red
    // 事件目标：真正被点击的那个元素
    console.log(e.target);
    if (e.target.tagName === "LI") {
      e.target.style.color = "red";
    }
  });
</script>
